import React, { useEffect, useState } from 'react';
import QueueAnim from 'rc-queue-anim';
import classnames from 'classnames';
import { history } from 'umi';
import styles from './index.less';

const GisMenu = ({ route, location }) => {
  useEffect(() => {
    const { pathname } = location;
    menuList.forEach((item) => {
      if (pathname.includes(item.value)) {
        setMenu(item.value);
      }
    });
  }, [location]);

  const [selectMenu, setMenu] = useState('quality');
  const menuList = [
    { name: '质量', value: 'quality' },
    { name: '进度', value: 'progress' },
    { name: '资金计划', value: 'plan' },
    { name: 'HSE', value: 'hse' },
    { name: '智慧工地', value: 'smartsite' },
    { name: '物资', value: 'material' },
    { name: '设计', value: 'design' },
  ];
  const handleChangeMenu = (path: string) => {
    const { search = '' } = location;
    const menu = route.path || '/tt/gis';
    console.log(`${menu}/${path}${search}`);
    history.push(`${menu}/${path}${search}`);
  };
  return (
    <QueueAnim type="top" delay={3000} ease="easeInOutQuart" className={styles.menu}>
      {menuList.map((menu) => (
        <div
          key={menu.value}
          onClick={() => handleChangeMenu(menu.value)}
          className={classnames(styles.item, { [styles.in]: selectMenu === menu.value })}
        >
          <img src={`/images/gis/icon-${menu.value}.png`} alt="" />
          {menu.name}
        </div>
      ))}
    </QueueAnim>
  );
};

export default GisMenu;
